<template>
  <div class="layout-padding row justify-center">

    <div style="width: 600px; max-width: 100vw;">
        <q-tabs
          inverted
          color="black"
          v-model="type"
          @select="updateAttentType"
        >
          <q-tab slot="title"  label="关注" name="attentions"/>
          <q-tab slot="title"  label="粉丝" name="fans"/>
        </q-tabs>
    </div>
    <q-card inline style="width: 600px; max-width: 100vw;">
      
      <q-card-separator  style="height:3px"/>
        <q-item>
          <q-item-main>
            <q-item-tile label>{{titlename}}</q-item-tile>
          </q-item-main>
        </q-item>
      <q-card-separator/>
      <!-- 粉丝or关注 -->
      <br>
       <h6 style="text-align: center;" v-if="customers.length<=0">
      <q-icon name="insert emoticon" color="blue"/> 空空如也！</h6>
      <common-compo v-else v-on:trigger-refresh="refresher"
          :enableScrollLoading="scrollLoading"  enableToTop>
        <div v-for="customer in customers" :key="customer.id" slot="content">
            <q-item>
              <q-item-side :avatar="(customer.logoRes || 'statics/hg-logo-camera.png') | avatarView"
                  @click="$router.push('/personal/personal-home?customerId='+customer.id)"/>
              <q-item-main>
                <q-item-tile label>{{customer.nickname}}</q-item-tile>
                <q-item-tile sublabel>{{customer.acquaintedDate | formatDateToTime}}</q-item-tile>
              </q-item-main>
              <q-item-side>
                   <q-btn outline small color="negative" :disable="getDisable(customer.isTogether)" 
                      @click="handlerAttent(customer.id)" >
                     {{customer.isTogether | attentOperateName(type,isself,customer.isMutual)}}</q-btn>
              </q-item-side>
            </q-item>
            <q-card-separator/>
        </div>
      </common-compo>
    </q-card>
  </div>
</template>

<script>
import {
  QCard,
  QCardTitle,
  QCardMedia,
  QCardActions,
  QCardSeparator,
  QCardMain,
  QItem,
  QItemMain,
  QItemSide,
  QItemTile,
  QBtn,
  QIcon,
  QTabs,
  QTab
} from "quasar";
import commonCompo from "../common-compo";
import Storage from "../../../utils/storage";
import attentionApi from "../../../https/attentionApi";
export default {
  components: {
    commonCompo,
    QCard,
    QCardTitle,
    QCardMedia,
    QCardActions,
    QCardSeparator,
    QCardMain,
    QItem,
    QItemMain,
    QItemSide,
    QItemTile,
    QBtn,
    QIcon,
    QTabs,
    QTab
  },
  data() {
    return {
      scrollEle: null,
      titlename: "Ta的关注", //标题：他的关注
      customerId: this.$route.query.customerId,//谁的关注or粉丝列表
      type: this.$route.query.type || "attentions", //类型，关注/粉丝/推荐/其他
      customers: [],
      page: 0,
      totalPages: 0,
      scrollLoading:false
    };
  },
  computed: {
    isself() {
      //是否是个人
      return (Storage.curuserId() && Storage.curuserId() == this.customerId) ? true:false;
    }
  },
  mounted() {
    console.log(this.customerId,'的关注，是否是当前人？',this.isself);
    this.loadData();
  },
  methods: {
    clearDatas(){
      this.customers= [],
      this.page= 0,
      this.totalPages= 0,
      this.scrollLoading=false
    },
    loadData() {
      const _prelength =  this.customers.length
      if (this.type == "fans") {
        this.titlename = this.isself ? "我的粉丝" : "Ta的粉丝";
        attentionApi.fansList(this.customerId).then(res => {
            const {status,data:{content,totalPages}} = res;
            if(status == 200 && content) {
              this.totalPages = totalPages;
              this.customers = this.customers.concat(content);
              this.isStopRefresher(_prelength,this.customers.length);
            }
          })
          .catch(err => {});
      } else if (this.type = "attentions") {
        this.titlename = this.isself ? "我的关注" : "Ta的关注";
        attentionApi.attentionsList(this.customerId).then(res => {
            const {status,data:{content,totalPages}} = res;
            if(status == 200 && content) {
              this.totalPages = totalPages;
              this.customers = this.customers.concat(content);
              this.isStopRefresher(_prelength,this.customers.length);
            }
          })
          .catch(err => {});
      }
    },
    updateAttentType(obj) {
      console.log("更改类型", obj);
      this.type = obj;
      this.clearDatas();
      this.loadData();
    },
    getDisable(isTogether) {
      //是否可以点击操作按钮
      if (this.isself) {
        if (this.type == "attentions") {
          return false;
        }
      }
      return isTogether;
    },
    handlerAttent(taruserId) {//处理关注操作
      if(taruserId) {
        if (this.isself && this.type == "attentions") {
          attentionApi.cancel({toId:taruserId}).then(res=>{
            if(res.status == 200) {
              this.clearDatas();
              this.loadData();
            }
          }).catch(err=>{})
          console.log("处理取消：", taruserId);
        } else {
          attentionApi.add({toId:taruserId}).then(res=>{
            if(res.status == 200) {
              this.clearDatas();
              this.loadData();
            }
          }).catch(err=>{})
          console.log("处理关注：", taruserId);
        }
      }
    },
     refresher(_ele) {
      this.scrollEle = _ele;
      this.scrollLoading = true;
      this.page++;
      console.log("控制滚动元素：page=",this.page,",totalPages=",this.totalPages);
      if (this.page > this.totalPages-1) {
        _ele.stop();
        this.scrollLoading = false;
        return;
      }
      this.loadData();
    },
    isStopRefresher(_prelength,_suflength) {
      console.log("前,", _prelength, "后,", _suflength);
      if (_prelength == _suflength) {
        console.log('停止滚动');
        this.scrollEle.stop();
        this.scrollLoading = false;
      }
    }
  }
};
</script>
